<template>
  <section class="headerUtil">
    <div v-if="obj.showType==0" class="header home-header" :class="{'changeRed': obj.isRed}">
      <div class="left-wrap" @click="headerFn(1)"></div>
      <div class="center-wrap">
        <div class="search-wrap" @click="headerFn(2)">
          <div class="search-icon"></div>
          <input class="search-input" disabled="disabled" placeholder="输入搜索的商品" type="text">
        </div>
      </div>
      <div class="right-wrap" @click="headerFn(3)">
        <span class="login">登录</span>
      </div>
    </div>
    <div v-if="obj.showType==1" class="header sort-header">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap">
        <div class="search-wrap" @click="headerFn(1)">
          <div class="search-icon"></div>
          <input class="search-input" disabled="disabled" placeholder="输入搜索的商品" type="text">
        </div>
      </div>
      <div class="right-wrap" @click="headerFn(2)"></div>
    </div>
    <div v-if="obj.showType==2" class="header groupbuy-header">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap">
        <span class="text">
          <slot></slot>
        </span>
      </div>
      <div class="right-wrap">
        <div class="close" @click="close" v-if="obj.closeBtn"></div>
      </div>
    </div>
    <div v-if="obj.showType==3" class="header searchbuy-header">
      <!-- <div class="left-wrap" @click="headerFn(0)"></div> -->
      <div class="center-wrap">
        <div class="search-wrap" @click="headerFn(1)">
          <div class="search-icon"></div>
          <input class="search-input" disabled="disabled" placeholder="输入搜索的商品" type="text">
        </div>
      </div>
      <div class="right-wrap"></div>
    </div>
    <div v-if="obj.showType==4" class="header search">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap">
        <div class="search-wrap" @click="headerFn(1)">
          <div class="search-icon"></div>
          <input class="search-input" v-model="searchText" placeholder="输入搜索的商品" type="text">
          <!-- <div class="close-btn"></div> -->
        </div>
      </div>
      <div class="right-wrap" @click="searchFn()">
        <div class="search-btn">搜索</div>
      </div>
    </div>
    <div v-if="obj.showType==5" class="header login">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap">
        <span class="text">
          <slot></slot>
        </span>
      </div>
      <div class="right-wrap"></div>
    </div>
    <div v-if="obj.showType==6" class="header detail">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap">商品详情</div>
      <div class="right-wrap"></div>
    </div>
    <div class="header order" v-if="obj.showType==7">
      <div class="left-wrap" @click="headerFn(0)"></div>
      <div class="center-wrap"><slot></slot></div>
      <div class="right-wrap"></div>
    </div>
  </section>
</template>
<script>
export default {
  props: {
    obj: {
      type: Object
    },
  },
  data () {
    return {
      navNum: 1,
      searchText: ""
    }
  },
  methods: {
    headerFn(i) {
      if(i==0){
        console.log(11)
        history.back();
      }else{
        this.$emit("myClick", i);
      }
    },
    searchFn() {
      this.$emit("searchClick", this.searchText);
    },
    selectNav(i) {
      this.navNum = i;
      this.$emit("myClick", i);
    },
    close() {
      this.$emit("closeFn");
    }
  },
}
</script>
<style lang="less" scoped>
.headerUtil {
  width: 3.75rem;
  height: .44rem;
  .header {
    width: 3.75rem;
    height: .44rem;
    display: flex;
    padding: 0 .1rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    transition: all .4s;
    &.order {
      background: linear-gradient(180deg,#fff,#efefef);
      
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .center-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .16rem;
        color: #333;
      }
    }
    &.detail {
      background: white;
      border-bottom: .01rem solid #f5f5f5;
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .center-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #252525;
        font-size: .18rem;
      }
      .right-wrap {
        // background: url("../../../assets/images/meun-icon-9.png") no-repeat right;
        background-size: 55%;
      }
    }
    &.login {
      background: white;
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .text {
        font-size: .16rem;
        color: #333;
      }
    }
    &.home-header {
      background: rgba(228, 49, 48, 0);
      &.changeRed {
        background: rgba(228, 49, 48, 1);
      }
      .left-wrap {
        background: url("../../../assets/images/more-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .right-wrap {
        color: white;
        font-size: .14rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .login {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    &.sort-header {
      background: white;
      border-bottom: .01rem solid #f5f5f5;
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .right-wrap {
        // background: url("../../../assets/images/meun-icon-9.png") no-repeat right;
        background-size: 55%;
      }
      .text {
        font-size: .16rem;
        color: #333;
      }
    }
    &.groupbuy-header {
      background: white;
      border-bottom: .01rem solid #f5f5f5;
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .right-wrap {
        // background: url("../../../assets/images/meun-icon-9.png") no-repeat right;
        background-size: 55%;
      }
      .text {
        font-size: .16rem;
        color: #333;
      }
    }
    &.searchbuy-header {
      background: white;
      .right-wrap {
        background: url("../../../assets/images/icon-1.gif") no-repeat right;
        background-size: 80%;
      }
    }
    &.search {
      background: white;
      .left-wrap {
        background: url("../../../assets/images/back-icon-1.png") no-repeat left;
        background-size: 55%;
      }
      .search-wrap {
        background: #f7f7f7;
        display: flex;
        .search-input {
          background: #f7f7f7;
          flex: 1;
        }
        .close-btn {
          width: .18rem;
          height: .18rem;
          background: url("../../../assets/images/jd-sprites.png") no-repeat;
          background-size: 2rem 2rem;
          background-position: -1.02rem .02rem;
        }
      }
      .right-wrap {
        width: .5rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .search-btn {
          width: .4rem;
          height: .3rem;
          background: #e93b3d;
          color: white;
          font-size: .14rem;
          border-radius: .04rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
    }
    .left-wrap {
      width: .4rem;
      height: .44rem;
    }
    .center-wrap {
      flex: 1;
      height: .44rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .search-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        height: .3rem;
        background: #f7f7f7;
        border-radius: .15rem;
        padding: 0 .1rem;
        box-sizing: border-box;
        .search-icon {
          width: .18rem;
          height: .15rem;
          background: url("../../../assets/images/search-icon-1.png") no-repeat center;
          background-size: contain;
          margin-right: .08rem;
        }
        .search-input {
          flex: 1;
          height: .3rem;
          line-height: .3rem;
          font-size: .14rem;
          color: #3c3c40;
          background: #f7f7f7;
          border: 0;
        }
        .search-input::-webkit-input-placeholder{
          font-size: .14rem;
          color: #3c3c40;
        }
      }
    }
    .right-wrap {
      width: .4rem;
      height: .44rem;
      font-size: .14rem;
      .close {
        width: .4rem;
        height: .44rem;
        background: url("../../../assets/images/clear-icon-1.png") no-repeat center;
        background-size: contain;
      }
    }
  }
  

}
</style>

